<template>
  <div class="ranking">
    <div class="table">
      <table class="table-content" cellspacing="0">
        <tr class="table-content-title">
          <th>排名</th>
          <th>项目（部）</th>
          <th>隐患数量</th>
          <th>评分等级</th>
          <th>得分</th>
          <!-- <th>主要问题</th> -->
        </tr>
        <tr
          class="table-content-data"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <td>{{ index + 1 }}</td>
          <td>{{ item.PROJECTNAME }}</td>
          <td>{{ item.NUM }}</td>
          <td>{{ item.LEVEL }}</td>
          <td>{{ item.SCORE }}</td>
          <!-- <td>{{ item.MAINPROBLEM }}</td> -->
        </tr>
      </table>
    </div>
    <div class="footer">
      <img
        src="../../assets/img/selectTime2.png"
        alt=""
        @click="openTimeSelect"
      />
      <div class="selectTime">{{ selectTime }}</div>
    </div>
    <popup v-model="showTimeSelect" :show-mask='false'>
      <div class="timeHeader">
        <span class="timeHeader-cancel" @click="cancel">取消</span>
        <span>日期</span>
        <span class="timeHeader-confirm" @click="confirm">完成</span>
      </div>
      <div>
        <picker
          :data="datas"
          v-model="currentTime"
          @on-change="change"
        ></picker>
      </div>
    </popup>
  </div>
</template>
<script>
// 配置事件选择器年、月、季度
let years = [];
let date = new Date();
for (var i = 1995; i <= date.getFullYear(); i++) {
  years.push({
    name: i + "年",
    value: i + ""
  });
}
let months = [];
for (var i = 1; i < 13; i++) {
  if (i < 10) {
    months.push({
      name: "0" + i + "月",
      value: "0" + i + ""
    });
  } else {
    months.push({
      name: i + "月",
      value: i + ""
    });
  }
}
let Quarterlys = [];
for (var i = 1; i < 5; i++) {
  Quarterlys.push({
    name: i + "季度",
    value: i + ""
  });
}
let Y = date.getFullYear().toString();
let M = date.getMonth() + 1;
let Q = null;
if (M < 4) {
  Q = 1;
} else if (M >= 4 && M < 7) {
  Q = 2;
} else if (M >= 7 && M < 10) {
  Q = 3;
} else {
  Q = 4;
}
Q = Q.toString();
if (M < 10) {
  M = "0" + M;
} else {
  M = M.toString();
}
export default {
  name: "ranking",
  data() {
    return {
      showTimeSelect: false,
      Y: Y,
      M: M,
      Q: Q,
      selectTime: "",
      datas: [years, Quarterlys, months],
      currentTime: [Y, Q, M],
      tableData: []
    };
  },
  props: {
    title: {
      type: String,
      require: true
    }
  },
  created() {
    this.selectTime = this.Y + "年第" + this.Q + "季度第" + this.M + "月";
    console.log(typeof this.Y);
    this.getRankList();
  },
  methods: {
    // 获取排名汇总列表
    getRankList() {
      let params =
        '{"_method": "PMHSE_ECHARTS.selectRankStatistics","CHECKYEAR":"' +
        this.Y +
        '","CHECKQUARTER":"' +
        this.Q +
        '","CHECKMONTH":"' +
        this.M +
        '"}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      }).then(res => {
        console.log("排名汇总：", res);
        this.tableData = res.data.data;
        // 处理函数
        // 加评分等级
        this.tableData = this.tableData.map(item => {
          if (item.SCORE > 80) {
            return {
              PROJECTNAME: item.PROJECTNAME,
              MAINPROBLEM: item.MAINPROBLEM,
              NUM: item.NUM,
              SCORE: item.SCORE,
              CHECKMONTH: item.CHECKMONTH,
              LEVEL: "优秀"
            };
          } else if (item.SCORE <= 80 && item.SCORE > 70) {
            return {
              PROJECTNAME: item.PROJECTNAME,
              MAINPROBLEM: item.MAINPROBLEM,
              NUM: item.NUM,
              SCORE: item.SCORE,
              CHECKMONTH: item.CHECKMONTH,
              LEVEL: "较好"
            };
          } else if (item.SCORE <= 70 && item.SCORE > 60) {
            return {
              PROJECTNAME: item.PROJECTNAME,
              MAINPROBLEM: item.MAINPROBLEM,
              NUM: item.NUM,
              SCORE: item.SCORE,
              CHECKMONTH: item.CHECKMONTH,
              LEVEL: "一般"
            };
          } else {
            return {
              PROJECTNAME: item.PROJECTNAME,
              MAINPROBLEM: item.MAINPROBLEM,
              NUM: item.NUM,
              SCORE: item.SCORE,
              CHECKMONTH: item.CHECKMONTH,
              LEVEL: "不合格"
            };
          }
        });
        // 排序
        this.tableData.sort(function(a, b) {
          return b.SCORE - a.SCORE;
        });
      });
    },
    // 打开时间选择区域
    openTimeSelect() {
      this.showTimeSelect = true;
    },
    change() {
      console.log(this.currentTime);
      this.Y = this.currentTime[0];
      this.Q = this.currentTime[1];
      this.M = this.currentTime[2];
      // this.selectTime =
      //   this.currentTime[0] +
      //   "年第" +
      //   this.currentTime[1] +
      //   "季度第" +
      //   this.currentTime[2] +
      //   "月";
    },
    confirm() {
      console.log(111);
      this.showTimeSelect = false;
      this.selectTime =
        this.currentTime[0] +
        "年第" +
        this.currentTime[1] +
        "季度第" +
        this.currentTime[2] +
        "月";
      // 选择时间后重新获取排名列表
      this.getRankList();
    },
    cancel() {
      this.showTimeSelect = false;
    }
  }
};
</script>
<style lang="less" scoped>
.ranking {
  margin-top: 8px;
  background: #fff;
}
.table {
  background: #fff;
  height: 100%;
  overflow-x: scroll;
  padding-top: 16px;
  padding-bottom: 50px;
  &-content {
    width: 800px;
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    color: #262a34;
    // 设置表格边框
    td,
    th {
      border: 1px solid #c4c8d2;
      text-align: center;
    }
    th {
      border-width: 1px 1px 1px 0px;
      height: 27px;
    }
    td {
      border-width: 0px 1px 1px 0px;
      height: 58px;
    }
    // 设置表格宽度
    td:nth-child(1),
    th:nth-child(1) {
      width: 53px;
    }
    td:nth-child(2),
    th:nth-child(2) {
      width: 217px;
    }
    td:nth-child(3),
    th:nth-child(3) {
      width: 79px;
    }
    td:nth-child(4),
    th:nth-child(4) {
      width: 79px;
    }
    td:nth-child(5),
    th:nth-child(5) {
      width: 79px;
    }
    &-title {
      background: #e9edf4;
      height: 27px;
      font-size: 12px;
    }
    &-data {
      height: 58px;
      font-size: 13px;
    }
    &-data:nth-child(odd) {
      background: #f4f5f7;
    }
  }
}
.footer {
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #efefef;
  img {
    width: 24px;
    height: 24px;
    margin-left: 12px;
  }
  .selectTime {
    width: 142px;
    height: 100%;
    background: #fff;
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    color: #262a34;
    line-height: 42px;
    text-align: center;
  }
}
// 时间选择器
.timeHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 41px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  &-cancel {
    margin-left: 15px;
  }
  &-confirm {
    margin-right: 15px;
    color: #4d86ff;
  }
  &-select {
    width: 210px;
    display: flex;
    justify-content: space-around;
    span {
      width: 60px;
      text-align: center;
    }
  }
}
</style>
